<template>
  <div class="user-banner">
    <div class="user-top">
      <p>
        <img
          @click="clickHandle"
          class="topImg"
          src="./image/3.1设置.png"
          alt=""
        />
      </p>
      <cell-group :border="false" style="position: relative" class="gap">
        <cell
          :to="isLoginEd() ? 'User-center' : 'Login'"
          class="gap"
          :title="title"
          is-link
          :label="label"
        />
        <img
          :src="headImg"
          @click="ToCenter"
          style="
            position: absolute;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            top: 1vw;
            border: none;
            left: 5vw;
            border: 1px solid dimgray;
          "
          alt=""
        />
        <p
          style="
            position: absolute;
            width: 100%;
            height: 10px;
            background-color: #007af4;
            top: 65px;
          "
        ></p>
      </cell-group>
      <img
        style="width: 100%; position: absolute; bottom: 0; height: 6vh"
        src="./image/屏幕截图2022-10-09112757.png"
        alt=""
      />
    </div>
    <grid :border="false" class="user-item">
      <grid-item
        @click="GoCollection(1)"
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e43051931f.png"
        text="我的收藏"
      />
      <grid-item
        @click="GoCart"
        class="setSize"
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e42b3c8838.png"
        text="购物车"
      />
      <grid-item
        @click="GoCollection(2)"
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e42b2b2adb.png"
        text="观看历史"
      />
      <grid-item
        @click="GoCollection(3)"
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e4305c6600.png"
        text="任务中心"
      />
    </grid>

    <div class="router">
      <cell
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e43047b6ba.png"
        title="我的钱包"
        @click="tishi"
        is-link
      />
      <cell
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e4304ce374.png"
        title="我的班级"
        @click="tishi"
        is-link
      />
      <cell
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e43051c58b.png"
        title="我的订单"
        is-link
        to="Home-Orders"
      />
      <cell
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e4305c721c.png"
        title="排行榜"
        @click="tishi"
        is-link
      />
      <cell
        icon="https://s2.232232.xyz/static/191/2022/10/18-634e42b46bb9c.png"
        title="联系客服"
        @click="tishi"
        is-link
      />
    </div>
  </div>
</template>
<script setup>
import { Cell, CellGroup, Grid, GridItem, Toast } from "vant";
import { getImg } from "../utils/tools";
import { useRouter } from "vue-router";
import { isLoginEd, getToken } from "../utils/tools";
import { getUserAPI, upUserDataAPI, delCart } from "../API/li";
import { ref } from "vue";

//用户信息
let title = ref("点击登录");
let label = ref("登录发现更多");
let headImg = ref("");
headImg.value =
  "https://img0.baidu.com/it/u=2556283513,3314307180&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500";
getUserAPI().then((res) => {
  console.log(res);
  if (res.code == 401) {
    title.value = "点击登录";
    label.value = "登录发现更多";
    headImg.value =
      "https://img0.baidu.com/it/u=2556283513,3314307180&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500";
  } else if (res.code == 200) {
    title.value =
      res.data.username == null
        ? "昵称：" + res.data.nickname
        : res.data.username;
    label.value = "账号：" + res.data.mobile;
    headImg.value =
      res.data.headProtrait == null
        ? "https://img0.baidu.com/it/u=2556283513,3314307180&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500"
        : res.data.headProtrait;
  }
});

//设置
let { push } = useRouter();
let clickHandle = () => {
  push({
    name: "User-setup",
  });
};
let onClickLeft = () => {};

//购物车
let GoCart = () => {
  push({
    name: "Home-Cart",
  });
};

//其他
let GoCollection = (tid) => {
  push({
    name: "User-collection",
    query: {
      id: tid,
    },
  });
};
let ToCenter = () => {
  push({
    name: "User-center",
  });
};
let tishi = () => {
  Toast.fail("当前版本暂不支持");
};
</script>
<style>
.user-banner
  .router
  .user-banner
  .van-cell--clickable
  .user-banner
  .van-cell__left-icon
  img {
  height: 30px;
  margin-top: -4px;
}
.user-banner .setSize .van-grid-item__content--center .van-grid-item__icon img {
  width: 34px;
}
.user-banner .van-cell__title,
.user-banner .van-cell__value span {
  color: #666666;
  font-size: 0.87rem;
}
.user-banner .user-item {
  box-shadow: 0px 0px 5px rgba(128, 128, 128, 0.26);
}
.user-banner {
  background-color: #fafafa;
}
.user-banner .router {
  margin-top: 2.4993vh;
  box-shadow: 0px 2px 5px rgba(128, 128, 128, 0.26);
}
.user-banner .van-grid-item__icon {
  width: 4.4978vh;
}
.user-banner .user-top p:nth-child(1) {
  background-color: #007af4;
  /* height: 14vw; */
  margin-top: 1.5vh;
  display: flex;
  justify-content: end;
}
.user-banner .topImg {
  width: 10vw;
  /* float: right; */
  margin-top: 1.4493vh;
  margin-right: 2.333vw;
}
.user-banner .user-top .van-cell__title span {
  font-size: 1.2rem;
}
.user-banner .user-top {
  width: 100vw;
  height: 30vh;
  overflow: hidden;
  background-color: #007af4;
  /* box-sizing: border-box;
  padding: 2.6667vw; */
  position: relative;
}
.user-banner .user-top .van-cell--clickable {
  background-color: #007af4;
  /* margin-top: 5vh; */
}
.user-banner .user-top .van-cell__title,
.user-banner .user-top .van-cell__value {
  margin-left: 20.6667vw;
  background-color: #007af4;
  color: #ffffff;
}
.user-banner .user-top .van-cell__label {
  color: #ffffff;
}
.user-banner .user-top .van-icon-arrow:before {
  margin-top: 10px;
  color: #ffffff;
}
.user-banner .van-icon__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.user-banner .user-top .van-cell__left-icon {
  /* width: 15vw; */
  height: 55px;
  margin-top: -0.8vh;
}
</style>
